<template>
	<view class="container" >
		<!-- 吸顶 -->
		<up-sticky style="background-color: #fff;top:4rpx;">
			<!-- 顶部安全高度 -->
			<view :style="{height: `${topHeight}px`}"></view>
			<!-- 顶部操作区域 -->
			<view class="header">
				<view class="header-left">
					<view class="header-left-avatar" @click="jumpPerson">
						<up-image v-if="userInfo?.img_url" :src="userInfo?.img_url" width="72rpx" height="72rpx" radius="8rpx">
							<template #error>
								<view style="width: 100%; height: 100%;">
									<text>{{showUserName(userInfo?.worker_name)}}</text>
								</view>
							</template>
						</up-image>

						<view v-else>
							<text>{{showUserName(userInfo?.worker_name)}}</text>
						</view>

					</view>
					<view class="header-left-company">
						江苏绿港现代农业发展股份有限公司
					</view>
				</view>
				<view class="header-right">
					<up-icon name="plus" @click="topBubble" color="#1A1A1A" size="20"></up-icon>
					<tui-bubble-popup :show="bubbleShow" position="absolute" @close="topBubble" width="240rpx" left="-188rpx"
						top="62rpx" backgroundColor="#fff" color="#333" :mask="true" maskBgColor="rgba(0, 0, 0, 0)"
						triangleLeft="1000px">
						<view class="tui-menu-item" @click="handleScancode">
							<up-icon name="scan" color="#1A1A1A" size="16"></up-icon>
							<text>扫一扫</text>
						</view>
						<view class="tui-menu-item" @click="handleCreate">
							<up-icon name="chat" color="#1A1A1A" size="16"></up-icon>
							<text>发起群聊</text>
						</view>
						<view class="tui-menu-item" @click="waterCamera">
							<uni-icons style="margin-left: -1px;" type="camera" color="#1A1A1A" size="18"></uni-icons>
							<text>水印相机</text>
						</view>
						<view class="tui-menu-item" @click="handleMore">
							<up-icon name="more-dot-fill" color="#909399" size="16"></up-icon>
							<text style="color: #909399;">更多</text>
						</view>
					</tui-bubble-popup>
				</view>
			</view>

			<!-- 搜索 -->
			<view class="search">
				<view class="search-content" @click="jumpSearch">
					<u-icon name="search" size="44rpx" color="rgb(144, 147, 153)"></u-icon>
					<text class="search-text">搜索</text>
				</view>
			</view>

			<!-- Tab标签 -->
			<scroll-view class="scorll-box" scroll-x>
				<view style="display: flex; flex-wrap: nowrap;">
					<view @click="openGroupSet" class="scorll-box-tab">
						<view><up-icon name="list" size="22"></up-icon></view>
					</view>
					<view v-for="item in tabs" :key="item.id" @click="tabChange(item.id)"
						:class="{ active: item.id === currentTab }" class="scorll-box-tab">
						<view>{{ item.title }}</view>
						<view v-if="item.title === '待办' && Todoquantity !== 0" class="badge">
							{{ Todoquantity }}
						</view>
					</view>
				</view>
			</scroll-view>
		</up-sticky>



		<z-paging
			ref="paging"
			v-model="messageListPaging"
			@query="getChatList"
			auto-hide-loading-after-first-loaded
			auto-show-system-loading
			:fixed="false"
			:paging-style="pagingStyle"
      :style="listHeightStyle"
		>
			<view class="list-container">
				<!-- 消息列表 -->
				<!-- <up-list :style="listHeightStyle"> -->
					<view
						v-for="(item, index) in filteredMessages"
						:key="`${index}-${item.id || item.group_id}`"
						style="height: 110rpx;"
					>
						<view class="message-item" @click="throttledClick(item)" @longpress="longpress(item, index)" @touchstart="touchStart" @touchmove="touchMove">
							<view class="top_up" v-if="item.top_up == 1"></view>

							<!-- 个人头像 -->
							<view v-show="!item.group_id" class="message-item-avatar">
								<up-image lazyLoad :src="setUserImg(item)" class="GrhomeImg" width="81rpx" height="81rpx" radius="10rpx">
									<template #error>
										<view style="width: 100%; height: 100%;">
											<text>{{showUserName(item.username)}}</text>
										</view>
									</template>
								</up-image>
							</view>
							<!-- 群组头像 -->
							<view v-show="item.group_id" class="message-item-avatar">
								<group-avatar :chat="item" :groupname="item.group_name"></group-avatar>
							</view>

							<view class="message-item-info">
								<view class="message-item-info-name">
									<text>{{item.username || item.group_name}}</text>
									<view v-if="item.lastMsg" class="time">
										{{setTimestamp(item.lastSendTime)}}
									</view>
								</view>
								<view class="message-item-info-detail">
									<text>
										{{showLastMsg(item)}}
									</text>
									<view v-if="item.unread_num > 0" class="unRead">{{item.unread_num}}</view>
								</view>
							</view>
						</view>
					</view>
				<!-- </up-list> -->
			</view>
		</z-paging>

		<!-- 发起群聊 -->
		<up-action-sheet @select="actionClick" cancelText="取消" :closeOnClickOverlay="true" @close="bubbleClose" :actions="actionsList" :show="bottomBubbleShow"></up-action-sheet>


		<up-popup :show="setShow" mode="bottom" @close="closeGroupTab" :customStyle="{maxHeight: '56vh', minHeight: '30vh', backgroundColor: '#F2F1F6'}">
			<up-navbar @rightClick="goSet" @leftClick="closeGroupTab" :safeAreaInsetTop="false" title="聊天分组" bgColor="#F2F1F6" :autoBack="false" :fixed="false" :titleStyle="titleStyle">
				<template #left>
					<up-icon name="close" size="22"></up-icon>
				</template>
				<template #right>
					<span>管理</span>
				</template>
			</up-navbar>

			<view class="setGroupList">
				<scroll-view scroll-y style="max-height: 45vh; min-height: 30vh;">
					<view v-for="(item, index) in tabs" class="group-item" @click="tabChange(item.id)" :key="index">
						{{item.title}}
					</view>
				</scroll-view>
			</view>
		</up-popup>
	</view>
</template>

<script>
	import { chatApi } from '@/apis/cloud/chat'
	import tabbar from '@/components/home-tabbar/index.vue'
	import { useChatStore, useGroupStore, useSocketStore, useUserStore, useStartTodoPolling } from '@/pinia-store/user'
	import { getTimeStringAutoShort, objectToFormData } from "@/utils/chat"
	import { throttle } from '@/utils/index.js'
 	import { ChatSql } from '@/utils/sql/chat'
	import dayjs from 'dayjs'
	import { mapStores } from 'pinia'
	import CreateGroup from './CreateGroup.vue'
	import GroupAvatar from './GroupAvatar.vue'
	import { debounce } from "@/utils/index.js"
  import {handleScanResult} from '@/utils/publicmethod'
	const AvaterBaseUrl = "https://cloud.mfarmers.com/dist/interface/public/upload/avatar/";

	export default {
		components: {
			tabbar,
			GroupAvatar,
			CreateGroup
		},
		data() {
			return {
				loading: false,
				setShow: false,
				titleStyle: {
					fontSize: '17px',
					fontWeight: '500',
				},
				userInfo: {},
				imInfo: null,
				topHeight: 0,
				currentTab: 0,
				bubbleShow: false,
				tabs: [{
						title: '全部',
						id: 0
					},
					{
						title: '群聊',
						id: 1
					},
					{
						title: '单聊',
						id: 2
					},
          {
            title: '待办',
            id: 3
          }
				],
				messageList: [], // 原始数据
				messageListPaging: [],
				groupStr: "", // 原始数据
        listHeight: 0, // 动态计算的高度
        listHeightStyle: {}, // 动态计算的样式
				startX: 0,
				startY: 0,
				moved: false,
				bottomBubbleShow: false,
				currentMsg: null,
				currentIndex: null,
				actionsList: [{ name: '删除' }],
				first: true,
				pagingStyle: {
					height: '80vh'
				}
			}
		},
		created() {
			// 获取IM登录信息
			// this.getChatInfo();
			
			this.loading = true;
      uni.$off('CreateGroupsuccess');
			let app = uni.getSystemInfoSync();
			this.topHeight = app.statusBarHeight;
			// 获取APP用户信息
			this.userInfo = this.userStore.user;
			
			
			this.calculateListHeight();
			this.getGroupTabs();
			uni.$on('reConnected', () => {
				this.getChatList()
				// this.$refs.paging.reload();
			});
      uni.$on('CreateGroupsuccess',(data)=>{
        this.getChatList();
				// this.$refs.paging.reload();
        this.socketStore.send(data);
        uni.showToast({
          title: '创建群聊成功',
          icon: 'success',
        });
      })

			uni.$emit('saveDevice');
		},
		computed: {
			...mapStores(useChatStore, useGroupStore, useUserStore, useSocketStore,useStartTodoPolling),
			// 过滤后的消息列表
			filteredMessages() {
				const tabsData = this.tabs.find(item => item.id == this.currentTab);

				const filterData =  this.messageList.filter(item => {
					const isGroup = item.isGroup;
					const unread_num = item.unread_num;
					const cache = [];

					switch (this.currentTab) {
						case 0:
							return true;
						case 1:
							return isGroup === 1;
						case 2:
							return isGroup === 0;
						default:
							console.log('next')
					}

					const result = tabsData.detail_info.some(tabChat => {
						return +tabChat.detail_id === +item.group_id || +tabChat.detail_id === +item.dialog_id
					})
					return result ? true : false

				});

				return filterData.sort((a, b) => {
					return b.top_up - a.top_up
				})
			},
			lastMsg() {
				return this.socketStore.lastMsg;
			},
      Todoquantity(){
        const todoStore = useStartTodoPolling();
        return todoStore.total
      }
		},
		watch: {
			lastMsg: function (newVal, oldVal) {
				this.debouncedFetch();
			}
		},
		onShow() {
			if(this.userInfo?.user) {
				this.getGroupTabs();
			}
			if(this.socketStore) {
				let routes = getCurrentPages();
				if(routes[routes.length - 1].route == 'pages/chat/list/index' && !this.first) {
					// this.getChatList();
					this.$refs.paging.reload();
				}
			}
		},
		methods: {
			async getChatList(value) {
				if(!this.imInfo) {
					this.first = false;
					const userParams = {
						data: {
							account: this.userInfo.chat_account,
							token: this.userInfo.token,
							myAccount: this.userInfo.chat_account,
						},
						url: 'index.php/users/Index/getUserInfo'
					}
					const userMsg = await chatApi(this.userInfo.token, objectToFormData(userParams))
					
					if (userMsg.code == 200) {
						this.imInfo = userMsg.data;
						this.chatStore.setImInfo(userMsg.data);
						uni.setStorageSync('imInfo', JSON.stringify(userMsg.data));
					}
				}
				
				let pageValue = value ? value : 1
				const params = {
					data: {
						account: this.userInfo.chat_account,
						token: this.userInfo.token,
						uid: this.imInfo.id,
					},
					// url: 'index.php/users/Index/getMyChatRecord'
					// url: 'index.php/users/Index/getMyTree'
					url: 'index.php/users/Index/getChatListCached'
				}
			
				const msg = await chatApi(this.userInfo.token, objectToFormData(params))
			
				if (msg.code == 200) {
					this.$refs.paging.complete(msg.data.friends);
					
					this.messageList = msg.data.friends;
			
					// groupStr存储
					this.groupStr = msg.data.groupStr;
					let num = 0;
					const dialogIds = msg.data.friends.map(item => {
						num += item.unread_num;
						if(item.isGroup == 1 && item.group_avatar_img != '') {
							item.groupAvatarImg = JSON.parse(item.group_avatar_img);
						}
			
						return item.dialog_id
					})
					if(num > 99) {
						uni.setTabBarBadge({
						  index: 0,
						  text: `99`
						})
					}else if(num > 0) {
						uni.setTabBarBadge({
						  index: 0,
						  text: `${num}`
						})
					}else {
						uni.removeTabBarBadge({
						  index: 0
						})
					}
					// 初始化WS
					uni.setStorageSync('_ws', JSON.stringify({phone: this.userInfo?.phone,account: this.userInfo?.chat_account, groupStr: this.groupStr, dialogIds: dialogIds}));
					this.socketStore.init({phone: this.userInfo?.phone,account: this.userInfo?.chat_account, groupStr: this.groupStr, dialogIds: dialogIds});
				}else {
					this.$refs.mentionPaging.complete(false);
				}
				this.loading = false;
			},
      //水印相机
			waterCamera() {
				// #ifdef APP-PLUS
				uni.navigateTo({
					url: "/pages/watermarkCamera/home"
				});
				// #endif
				// #ifdef H5
				uni.navigateTo({
					url: "/components/watermarkCamera/h5camera"
				});
				// #endif
			},
			debouncedFetch: debounce(function () {
				this.getChatList();
			}, 350),
			closeGroupTab() {
				this.setShow = false;
			},
			async getGroupTabs() {
				let token = uni.getStorageSync('token')
				const params = {
					'data[account]': this.userInfo.chat_account,
					'data[token]': this.userInfo.token,
					'data[myAccount]': this.userInfo.chat_account,
					url: 'index.php/users/Group/GetGroupInfo'
				}

				const msg = await chatApi(this?.userInfo?.token || token, params);

				const cache = msg.data.map(item => {
					return {
						title: item.title,
						id: item.id,
						detail_info: item.detail_info,
						checked: item.checked
					}
				})
				this.tabs = [...(this.tabs.slice(0, 4)), ...cache];
			},
			goSet() {
				uni.navigateTo({
					url: '/pages/chat/list/setMsgGroup'
				})
			},
			openGroupSet() {
				this.setShow = true;
			},
			jumpSearch() {
				uni.navigateTo({
					url: '/pages/chat/list/search'
				});
			},
			actionClick(e) {
				if(e.name == '删除') {
					this.deleteMessage(this.currentMsg, this.currentIndex);
				}
			},
			bubbleClose() {
				this.bottomBubbleShow = false;
			},
			longpress(record, index) {
				// 只有在没有滑动的情况下才执行长按逻辑
				if (this.moved) return

				if(record.isGroup == 1) return;
				this.currentMsg = record;
				this.currentIndex = index;
				this.bottomBubbleShow = true;
			},
			touchStart(e) {
				const touch = e.touches[0]
				this.startX = touch.pageX
				this.startY = touch.pageY
				this.moved = false
			},
			touchMove(e) {
				const touch = e.touches[0]
				if (Math.abs(touch.pageX - this.startX) > 10 ||
						Math.abs(touch.pageY - this.startY) > 10) {
					this.moved = true
				}
			},
			throttledClick(item) {
			  throttle(this.goMessage, 1000).call(this, item);
			},
      calculateListHeight() {
        const windowHeight = window.innerHeight; // 视口高度
        const topHeight = 122 ; // 顶部安全高度
        const headerHeight = 60; // 顶部操作区域、搜索框等的高度

        // #ifdef APP-PLUS
        this.listHeightStyle = {
          height: `calc(100vh - ${310}rpx)`,
          overflowY: 'auto',
        };
        // #endif

        // #ifdef H5
        const listHeight = windowHeight - topHeight - headerHeight;
        this.listHeightStyle = {
          height: `${listHeight}px`,
          overflowY: 'auto',
        };
        // #endif
      },
			setUserImg(item) {
				return AvaterBaseUrl+item.friend_phone+'.jpg'
			},
			// 获取chat登录信息
			async getChatInfo() {
				const params = {
					data: {
						account: this.userInfo.chat_account,
						token: this.userInfo.token,
						myAccount: this.userInfo.chat_account,
					},
					url: 'index.php/users/Index/getUserInfo'
				}
				const msg = await chatApi(this.userInfo.token, objectToFormData(params))

				if (msg.code == 200) {
					this.imInfo = msg.data;
					this.chatStore.setImInfo(msg.data);
					uni.setStorageSync('imInfo', JSON.stringify(msg.data));

					// 初始化
					// this.getChatList();
				}
			},
			goMessage(item) {
				this.socketStore.nowDialogId = item.dialog_id;
				uni.setStorageSync('nowDialogId', item.dialog_id);
				if (item.isGroup === 1) {
					this.groupStore.setGroup(item);
					uni.setStorageSync('groupMsg', JSON.stringify(item));
					uni.navigateTo({
						url: '/pages/chat/message/group/group'
					})
				} else {
					this.chatStore.setChat(item);
					uni.setStorageSync('friend', JSON.stringify(item));
					uni.navigateTo({
						url: '/pages/chat/message/chat/chat'
					})
				}
			},
			// 时间格式化
			formatTime(time) {
				return dayjs(time).format('HH:mm')
			},
			// Tab切换
			tabChange(index) {
        if(index == 3){
          uni.navigateTo({
            url: '/pages/Mytodolist/home/index'
          })
          return
        }
				this.setShow = false;
				this.currentTab = index;
			},
			// 删除消息
			async deleteMessage(item, index) {
				if (item.isGroup) {
					this.messageList.splice(index, 1);
				} else {
					const params = {
						data: {
							account: this.userInfo.chat_account,
							token: this.userInfo.token,
							myAccount: this.userInfo.chat_account,
							friend_account: item.friend_account
						},
						url: 'index.php/users/Index/removeFriend'
					}

					const msg = await chatApi(this.userInfo.token, objectToFormData(params));
					if (msg.code == 200) {
						this.messageList.splice(index, 1);
					} else {
						console.log(msg);
					}
				}
			},
			// 切换置顶
			toggleTop(item) {
				item.top_up = item.top_up == 1 ? 0 : 1;
				this.messageList.sort((a, b) => {
					return b.top_up - a.top_up
				})
			},
			// 创建群聊
			handleCreate() {
        let that = this;
        uni.navigateTo({
          url: '/pages/chat/list/CreateGroup',
          success: function (res) {
            res.eventChannel.emit('ChatList', JSON.stringify({
                uid:that.imInfo.id,
                userInfo:that.userInfo,
              }))
          },
        })
			},
			// 气泡
			topBubble() {
				this.bubbleShow = !this.bubbleShow;
			},
			//更多
			handleMore() {
				let that = this;
				uni.navigateTo({
					url: '/pages/chat/more/index',
					success: function(res) {
						res.eventChannel.emit('moreParams', { userInfo: that.userInfo,imInfo: that.imInfo });
					}
				});
			},
      //扫一扫
      async handleScancode () {
        /*
        uni.navigateTo({
          url: "/pages/watermarkCamera/index"
        })
        return;*/

        // #ifdef APP-PLUS
        uni.scanCode({
          onlyFromCamera: true,
          success: (res) => {
            handleScanResult(res.result)
          },
          fail: (err) => {
           console.error('扫描失败:', err);
          }
        });
        // #endif

        // #ifdef H5
        uni.navigateTo({
          url: "/pages/h5ScanUpload/index"
        })
        // #endif
      },

			showLastMsg(item) {
				const { lastMsg, group_id, friend_account } = item;
				if (!lastMsg) {
					return '';
				}

				if(lastMsg.status && lastMsg.status == 12) {
					if(group_id) {
						return `${item.lastMsg.fromname}撤回了一条信息`
					}else {
						if(item.friend_account == item.lastMsg.from_account) {
							return `${item.lastMsg.fromname}撤回了一条信息`
						}else {
							return `你撤回了一条信息`
						}
					}
				}
				let re = '';
				let row = lastMsg;
				let arr = Array.isArray(row.content) ? row.content : JSON.parse(row.content);
				let newText = arr[0].content;
				newText = this.removeHTMLTags(newText);
				if(arr[0].type == 'apply_urge' || arr[0].type == 'apply' || arr[0].type == 'apply_mention' || arr[0].type == 'log') {
					newText = JSON.parse(arr[0].content).title
				}

				if( arr[0].type == 'notice') {
					newText = `公告${':' + JSON.parse(arr[0].content).title || ''}`
				}
				
				if( arr[0].type == 'log_notice') {
					newText = `${JSON.parse(arr[0].content).content || ''}`
				}
				if (!group_id) {
					if (row.from_phone == this.phone) {
						if (row.status < 11) {
							re = '[未读]';
						} else {
							re = '[已读]';
						}
					}
				} else {
					re = row.fromname + "：";
				}

				switch (arr[0].type) {
					case 'text':
						re += newText;
						break;
					case 'img/text':
						re += '[图文]';
						break;
					case 'img':
						re += '[图片]';
						break;
					case 'file':
						re += '[文件]';
						break;
					case 'dir':
						re += '[文件夹]';
						break;
					// case 'apply_urge':
					// 	re += '[文件夹]';
					// 	break;
					default:
						re += newText;
						break;
				}
				
				return this.formatText(re);
			},
			formatText(str) {
			  if (!str) return "";
			
			  // 1. 去除所有 HTML 标签
			  str = str.replace(/<[^>]+>/g, "");
			
			  // 2. 去除换行符
			  str = str.replace(/[\n\r]/g, "");
			
			  // 3. 去除 &nbsp; 并替换为空格
			  str = str.replace(/&nbsp;/g, " ");
			
			  // 4. 去除多余空格（多个空格合并为一个）
			  str = str.replace(/\s+/g, " ");
			
			  // 5. 去除首尾空格
			  return str.trim();
			},
			removeHTMLTags(str) {
				str = str.replace(/<[^>]*>/g, '');
				str = str.replace(/&nbsp;/g, ' ')
				return str;
			},
			// 计算时间差
			setTimestamp(date) {
				const result = getTimeStringAutoShort(new Date(date.replace(/-/g,'/')).getTime(), true)
				return result
			},
			// 名称超长处理
			showUserName(username) {
				if (username && username.length > 2) {
					return username.substr(1, 2);
				} else {
					return username;
				}
			},
			jumpPerson() {
				let params = {
					id: this.userInfo.worker_id,
					name: this.userInfo.worker_name,
					type: 'user',
					avatar: this.userInfo.img_url
				}
				uni.navigateTo({
					url: '/pages/addressBook/details/grdetails',
					animationType: 'none',
					success: function(res) {
					res.eventChannel.emit('details', { item: params })
					}
				});
			}
		}
	}
</script>

<style>
/deep/ .GrhomeImg .u-image{
 background-color: transparent !important;
}
</style>

<style lang="scss" scoped>
	page {
		overflow: hidden;
		// height: 100%;
	}

  .message-item {
    display: flex;
    height: 110rpx; /* 固定高度 */
    overflow: hidden; /* 防止内容溢出 */
  }
  .container {
    //height: 100vh;
    overflow: hidden;
  }
  .list-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  .search {
    padding: 16rpx 20rpx 16rpx 20rpx;

	&-content {
		height: 67rpx;
		background-color: rgb(242, 242, 242);
		display: flex;
		align-items: center;
		border-radius: 8rpx;
		padding: 0 20rpx;
	}

	&-text {
		color: rgb(144, 147, 153);
		font-size: 28rpx;
		padding: 0 10rpx;
	}
  }

  .userName {
    height: 2.3rem;
    border-radius: 10%;
    background: #377fff;
    text-align: center;
    color: #ffffff;
    line-height: 2.3rem;
  }
	.header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 30rpx 0 20rpx;

		&-left {
			display: flex;
			align-items: center;

			&-avatar {
				width: 72rpx;
				height: 72rpx;
				text {
					display: inline-block;
					width: 72rpx;
					height: 72rpx;
					border-radius: 8rpx;
					color: #fff;
					font-size: 26rpx;
					text-align: center;
					line-height: 72rpx;
					background-color: #3D85FC;
				}
			}

			&-company {
				margin-left: 20rpx;
				font-weight: 500;
			}
		}

		&-right {
			position: relative;
		}
	}

  .scorll-box {
    //margin-top: 8px;
    width: 95%;
    padding: 0 0 10rpx 10rpx;
    border-bottom: 1px solid #efefef;

    .scorll-box-tab {
      position: relative; // 确保父元素为相对定位
      white-space: nowrap;
      display: flex;
      align-items: center;
      justify-content: center;

      view:first-child {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }

      .badge {
        position: absolute;
        right: -15rpx; // 水平偏移
        transform: translateY(-44%); // 微调垂直位置
        color: #fff;
        background-color: red;
        text-align: center;
        z-index: 9999;
        width: auto;
        height: 16px;
        line-height: 16px;
        border-radius: 16px;
        min-width: 16px;
        font-size: 12px;
        white-space: nowrap;
      }
    }

    &-tab {
      z-index: 0;
      padding: 0 16rpx;
      margin: 0 10rpx;
      font-size: 28rpx;
      line-height: 60rpx;
      text-wrap: nowrap;
      background-color: #EFF0F3;
      color: #737373;
      border-radius: 10rpx;
    }

    .active {
      background-color: #E2F0FD !important;
      color: #397DDA !important;
    }
  }
	.tui-menu-item {
		display: flex;
		align-items: center;
		width: 100%;
		padding: 20rpx;
		box-sizing: border-box;
		border-bottom: 1px solid #eee;
		font-size: 28rpx;

		text {
			margin-left: 12rpx;
		}

		&:active {
			background-color: #efefef;
		}
	}

	.message {
		margin-top: 10rpx;
		position: relative;

		.top_up {
			position: absolute;
			right: 8rpx;
			top: 0;
			width: 0;
			height: 0;
			border: 4px solid;
			border-color: #92C6F6 #92C6F6 transparent transparent;
		}

		&-item {
			position: relative;
			display: flex;
			padding: 12rpx 0 12rpx 20rpx;

			&:active::after {
				content: '';
				position: absolute;
				width: 100%;
				height: 110rpx;
				left: 0;
				top: 0;
				background-color: rgba(0, 0, 0, 0.15);
				border-radius: 6rpx;
				pointer-events: none;
			}

			&-avatar {
				width: 90rpx;

				text {
					display: inline-block;
					width: 82rpx;
					height: 82rpx;
					border-radius: 10rpx;
					color: #fff;
					font-size: 26rpx;
					text-align: center;
					line-height: 82rpx;
					background-color: #3D85FC;
				}
			}

			&-info {
				margin-left: 10rpx;
				width: calc(100vw - 142rpx);

				&-name {
					display: flex;
					justify-content: space-between;
					align-items: center;
					font-size: 32rpx;
					text {
						width: 70%;
						text-wrap: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
					}
					view {
						font-size: 24rpx;
						color: #A7A7A7;
					}
				}

				&-detail {
					position: relative;
					display: flex;
					justify-content: space-between;

					text {
						display: inline-block;
						width: 95%;
						margin-top: 4rpx;
						font-size: 24rpx;
						color: #A7A7A7;
						text-wrap: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
					}

					.unRead {
						display: inline-block;
						position: absolute;
						right: -6rpx;
						top: 6rpx;
						border-radius: 50%;
						background-color: #FF4E16;
						color: #fff;
						font-size: 22rpx;
						min-width: 32rpx;
						height: 32rpx;
						text-align: center;
						line-height: 32rpx;
					}
				}
			}
		}
	}
	.setGroupList {
		margin: 10px 10px 20px 10px;
		border-radius: 8px;
		background-color: #fff;
		height: auto;
		.group-item {
			margin: 0 20px;
			font-size: 14px;
			line-height: 46px;
			border-bottom: 1rpx solid #edd;
		}
		.group-item:last-child {
			border-bottom: none;
		}
	}
</style>
